<template>
  <div class="main">
    <el-container>
      <el-aside :width="asideFold ? '150px' : '60px'">
        <nav-menu :isFold="asideFold"></nav-menu>
      </el-aside>
      <el-container>
        <el-header>
          <nav-header @listenFold="handleFold"></nav-header>
        </el-header>
        <el-main>
          <div class="routerBgc">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { navMenu } from '@/components/nav-menu';
import { navHeader } from '@/components/nav-header';
import { ref } from 'vue';
const asideFold = ref(true);
const handleFold = ({ isFold }: any) => {
  asideFold.value = isFold;
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
  .el-container {
    width: 100%;
    height: 100%;
    .el-aside {
      background-color: rgba(2, 20, 32, 0.9);
      transition: width 0.4s linear;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .el-header {
      height: 40px;
      line-height: 40px;
      padding: 0px 0px !important;
    }
    .el-main {
      background-color: rgba(237, 239, 243, 0.6);
      text-align: center;
      padding: 10px !important;
      .routerBgc {
        width: 100%;
        height: 100%;
        background-color: #fff;
      }
    }
  }
}
</style>
